<template>
    <view>
        <mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" beforeEndDelay="2000" @init="mescrollInit"
        	@down="downCallback">
			<view class="userhead">
				<u-image :src="UserInfo.usertx" shape="circle" width="68" height="68"></u-image>
				<view class="msg">
					<u-text :text="UserInfo.nickname" color="#fff" size="18" bold></u-text>
					<u-text :text="'会员到期：'+UserInfo.viptime" color="#fff" size="16" bold></u-text>
				</view>
			</view>			
            <view class="body">				
                <block v-for="(shop, shopindex) in ShopList" :key="shopindex">
                    <view  class="card" @click="OpenPay(shop.id)">
                        <view class="shopmsg">
                            <view class="flex">
                                <u-text :text="shop.name" bold></u-text>
                                <u-text :text="'￥'+shop.price" color="#ff0000" bold align="right"></u-text>
                            </view>
                            <view class="flex">
                                <view class="bg2">
                                    <u-text size="12" :text="'会员:'+shop.vipdate+'天'" color="#fff" bold></u-text>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
			<view class="vips">
				<u-text text="会员权益" bold></u-text>
				<view class="vipview">
					<block v-for="(vip, vipindex) in VipList" :key="vipindex">
						<view  class="vipcard">
							<u-image :src="vip.icon" width="58" height="58"></u-image>
							<view>
								<u-text :text="vip.title" bold></u-text>
								<u-text :text="vip.msg" color="#909090" size="12"></u-text>
							</view>
						</view>
					</block>    
				</view>
			</view>
			<u-popup :show="show" @close="close" @open="open" round="20" closeable customStyle="padding:30rpx;">
			    <view>
			        <!-- <u-text text="官方支付" bold></u-text>
			        <view class="pays">
			            <view class="ali" @click="AliPay(shop.id)">
			                <u-text text="支付宝支付" prefixIcon="zhifubao-circle-fill" iconStyle="font-size: 20px;color:#fff" color="#fff" align="center" bold></u-text>
			            </view>
			            <view class="no">
			            </view>
			            <view class="no">
			            </view>
			        </view> -->
					<u-text text="网站支付" bold></u-text>
					 <view class="pays">
					     <view class="ali" @click="Pays('alipay',shopid)">
					         <u-text text="支付宝支付" prefixIcon="zhifubao-circle-fill" iconStyle="font-size: 20px;color:#fff"  color="#fff" align="center" bold></u-text>
					     </view>
					     <view class="wx" @click="Pays('wxpay',shopid)">
					         <u-text text="微信支付" prefixIcon="weixin-circle-fill" iconStyle="font-size: 20px;color:#fff"  color="#fff" align="center" bold></u-text>
					     </view>
					     <view class="qq" @click="Pays('qqpay',shopid)"> 
					         <u-text text="QQ支付" prefixIcon="qq-circle-fill" iconStyle="font-size: 20px;color:#fff"  color="#fff" align="center" bold></u-text>
					     </view>
					 </view>
			    </view>
			</u-popup>
        </mescroll-body>
        <u-no-network image="/static/nodata/404.png"></u-no-network>
    </view>
</template>

<script>
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import API from '../../util/request.js';
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
				show:false,
				shopid:'',
				UserInfo:'',
                ShopList: [],
				VipList:[{
					title:'免费下载',
					msg:'享受全APP免费下载权益',
					icon:'/static/common/appview.png'
				},{
					title:'免费下载',
					msg:'享受全APP免费下载权益',
					icon:'/static/common/appview.png'
				}],
                downOption: {
                	use: true, // 是否启用下拉刷新; 默认true
                	auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                	native: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
                	autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
                	isLock: false, // 是否锁定下拉刷新,默认false;
                	offset: 70, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
                	inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                	outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                	bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
                	minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
                	beforeEndDelay: 400, // 延时结束的时长 (显示加载成功/失败的时长, android小程序设置此项结束下拉会卡顿, 配置后请注意测试)
                	bgColor: "#ff7708", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
                	textColor: "#ffffff", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
                	textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
                	textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
                	textLoading: '加载中 ...' // 加载中的提示文本
                },
                upOption: {
                	use: false, // 是否启用上拉加载; 默认true
                	auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                	isLock: false, // 是否锁定上拉加载,默认false;
                }
            }
        },
        methods: {
            //下拉刷新
            downCallback() {
                var that = this;
                let token = uni.getStorageSync('Token');
                let user = uni.getStorageSync('User');
                if (token !== null && token !== '') {
                	uni.request({
                		url: API.GetUserInfo() + user,
                		success: (res) => {							
                			var data = JSON.parse(this.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
                			// console.log(data)
                			if (data.code == 400) {
                				uni.setStorageSync('SET_ISLOGIN', false);
                				uni.removeStorageSync('Token');
                				uni.removeStorageSync('User');
                				uni.navigateTo({
                					url: '/pages/account/login'
                				})
                			} else {
                				that.UserInfo = '';
                				that.UserInfo = data.data;
                				uni.request({
                					url: API.GetShopList(),
                					success: (res) => {
                						var data = JSON.parse(this.AES.decrypt(res.data,API.JmKey(), API.JmIv()));
                						// console.log(data)
                						let curPageLen = data.data.length;
                						that.ShopList = [];
                						that.ShopList = that.ShopList.concat(data.data);
                						that.mescroll.endSuccess(data.data);
                						console.log(that.ShopList)
                					},
                					fail: (res) => {
                						console.log(res);
                					}
                				})
                			}
                		}
                	})
                }
            },
			OpenPay(shopid){
			    this.show=true;
				this.shopid=shopid;
			},
			open() {
			    // console.log('open');
			},
			close() {
			    this.show = false
			    // console.log('close');
			},
            Pays(type,id){
                this.show=false
                let token = uni.getStorageSync('Token');
                let user = uni.getStorageSync('User');
				plus.runtime.openURL(API.BuyShop()+token+'&shopid='+id+'&shoptype=1&paytype='+type);
				// uni.request({
				// 	url: API.BuyShop()+token+'&shopid='+id+'&shoptype=1&paytype='+type,
				// 	success: (res) => {
				// 		var data = JSON.parse(this.AES.decrypt(res.data,API.JmKey(), API.JmIv()));
				// 		console.log(data)
				// 	},
				// })
            }
			
        }
    }
</script>

<style lang="scss">

	.userhead{
		padding: 20rpx;
		background-image: url(../../static/my/mybg.png);
		display: flex;
	}
	.msg{
		margin-left: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.vips{
		padding: 0 10px 10px 10px;
	}
	.vipview{
		margin-top: 10px;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		// margin: 0;
	}
	.vipcard {
		padding: 8px;
	    width: 45%;
		display: flex;
	    align-items: center;
	    justify-content: center;
	    border-radius: 20rpx;
	    background-color: #ffffff;
	}
	
    .body {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0;
        padding: 20rpx;  
    }

    .card { 
        width: 32%;
        align-items: center;
        justify-content: center;        
        margin-bottom: 15rpx;
        border-radius: 20rpx;
        background-color: #ffffff;
    }
    .shopmsg{
        padding: 15rpx;
    }
    .img {
        width: 100%;
        // height: 200rpx;
        border-radius: 30rpx;
    }

    .flex {
        display: flex;        
    }

    .bg1 {
        background-color: #ff5500;
        margin-right: 10rpx;
        margin-top: 10rpx;
        border-radius: 10rpx;
        padding: 5rpx 10rpx 5rpx 10rpx;
    }

    .bg2 {
        background-color: #ff0000;
        margin-right: 10rpx;
        margin-top: 10rpx;
        border-radius: 10rpx;
        padding: 5rpx 10rpx 5rpx 10rpx;
    }
	
	
	.pays{
	    display: flex;
	    margin: 20rpx 0;
	}
	.ali{
	    width: 33%;
	    height: 66rpx;
	    display: flex;
	    margin-right: 15rpx;
	    border-radius: 10px;
	    justify-content: center;
	    background-color: #00aaff;
	}
	.wx{
	    width: 33%;
	    display: flex;
	    height: 66rpx;
	    margin-right: 15rpx;
	    border-radius: 10px;
	    justify-content: center;
	    background-color: #00aa7f;
	}
	.qq{
	    width: 33%;
	    height: 66rpx;
	    display: flex;
	    margin-right: 15rpx;
	    border-radius: 10px;
	    justify-content: center;
	    background-color: #aa55ff;
	}
	.no{
	    width: 33%;
	    height: 66rpx;
	    display: flex;
	    margin-right: 15rpx;
	    border-radius: 10px;
	    justify-content: center;
	    background-color: rgba(0, 0, 0, 0);
	}
</style>
